<!--
 * @Author: zhang_rui_1 17805271997@163.com
 * @Date: 2023-07-12 16:44:54
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2023-12-27 21:48:06
 * @FilePath: \vue3-ts\src\views\bus\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="box-main-center-bottom">
    <!-- 全球总览 -->
    <div class="bottom" @click="btnClick(1)"><p>全球总览</p></div>
    <div class="bottom" @click="btnClick(2)"><p>安全态势</p></div>
    <div class="bottom" @click="btnClick(3)"><p>安全告警</p></div>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter();
const btnClick = (value: any) => {
  value == 1
    ? router.push("/bus/allLook")
    : value == 2
    ? router.push("/bus/securitySituation")
    : router.push("/bus/securityAlarm");
};
</script>
<style scoped lang="less">
.box-main-center-bottom {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  position: relative;
}
.bottom {
  background: url("../../../../assets/images/bus/centerBottom.png") no-repeat;
  background-size: cover;
  width: 7.125rem;
  height: 7.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  &:nth-child(1),
  &:nth-child(3) {
    position: relative;
    bottom: 30%;
  }
  &:nth-child(2) {
    position: relative;
    bottom: 47%;
  }
}
</style>